<html lang=""><head>
        <title>框架 · MINA</title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.0">
        
        
        
    
    <link rel="stylesheet" href="./style.css">

    
            
                
                <link rel="stylesheet" href="./website.css">
                
            
                
                <link rel="stylesheet" href="./search.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="./images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="structure.html">
    
    
    <link rel="prev" href="../demo.html">
    

    </head>
    <body>
        
<div class="book with-summary">
    <div>

    <div class="sub_nav_box">
        <div class="sub_nav_inner">
            



<ul class="top_sub_nav">

    
        
    
        <li class="sub_nav_item " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    简易教程
            
                </a>
            
        </li>
    
        <li class="sub_nav_item selected" data-level="1.2" data-path="MINA.html">
            
                <a href="MINA.html">
            
                    
                    框架
            
                </a>
            
        </li>
    
        <li class="sub_nav_item " data-level="1.3" data-path="../component/">
            
                <a href="../component/">
            
                    
                    组件
            
                </a>
            
        </li>
    
        <li class="sub_nav_item " data-level="1.4" data-path="../api/">
            
                <a href="../api/">
            
                    
                    API
            
                </a>
            
        </li>
    
        <li class="sub_nav_item " data-level="1.5" data-path="../devtools/devtools.html">
            
                <a href="../devtools/devtools.html">
            
                    
                    工具
            
                </a>
            
        </li>
    
        <li class="sub_nav_item " data-level="1.6" data-path="../qa/qa.html">
            
                <a href="../qa/qa.html">
            
                    
                    Q&amp;A
            
                </a>
            
        </li>
    

    

</ul>
     



            <!-- <h1>框架</h1> -->
            <div id="book-search-input" role="search">
                <form>
                    <label for="search-input" class="search-icon" id="js-search-icon"></label>
                    <input type="text" id="search-input" name="search-input" placeholder="搜索">
                    <button type="reset" class="clear-input-btn"></button>
                </form>
            </div>
        </div>
    </div>

    <div class="book-summary">
        
            
                <nav role="navigation">
                




<ul class="summary">
                
    
        <li class="chapter  " data-level="1.2.1" data-path="structure.html">
            
                <a href="structure.html">
            
                    
                    目录结构
            
                </a>
            

            
        </li>
    
        <li class="chapter  " data-level="1.2.2" data-path="config.html">
            
                <a href="config.html">
            
                    
                    配置
            
                </a>
            

            
        </li>
    
        <li class="chapter  open" data-level="1.2.3" data-path="app-service/">
            
                <a href="app-service/">
            
                    
                    逻辑层
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter  " data-level="1.2.3.1" data-path="app-service/app.html">
            
                <a href="app-service/app.html">
            
                    
                    注册程序
            
                </a>
            

            
        </li>
    
        <li class="chapter  " data-level="1.2.3.2" data-path="app-service/page.html">
            
                <a href="app-service/page.html">
            
                    
                    注册页面
            
                </a>
            

            
        </li>
    
        <li class="chapter  " data-level="1.2.3.3" data-path="app-service/module.html">
            
                <a href="app-service/module.html">
            
                    
                    模块化
            
                </a>
            

            
        </li>
    
        <li class="chapter  " data-level="1.2.3.4" data-path="app-service/api.html">
            
                <a href="app-service/api.html">
            
                    
                    API
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter  open" data-level="1.2.4" data-path="view/">
            
                <a href="view/">
            
                    
                    视图层
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter  " data-level="1.2.4.1" data-path="view/wxml/">
            
                <a href="view/wxml/">
            
                    
                    WXML
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter  " data-level="1.2.4.1.1" data-path="view/wxml/data.html">
            
                <a href="view/wxml/data.html">
            
                    
                    数据绑定
            
                </a>
            

            
        </li>
    
        <li class="chapter  " data-level="1.2.4.1.2" data-path="view/wxml/conditional.html">
            
                <a href="view/wxml/conditional.html">
            
                    
                    条件渲染
            
                </a>
            

            
        </li>
    
        <li class="chapter  " data-level="1.2.4.1.3" data-path="view/wxml/list.html">
            
                <a href="view/wxml/list.html">
            
                    
                    列表渲染
            
                </a>
            

            
        </li>
    
        <li class="chapter  " data-level="1.2.4.1.4" data-path="view/wxml/template.html">
            
                <a href="view/wxml/template.html">
            
                    
                    模板
            
                </a>
            

            
        </li>
    
        <li class="chapter  " data-level="1.2.4.1.5" data-path="view/wxml/event.html">
            
                <a href="view/wxml/event.html">
            
                    
                    事件
            
                </a>
            

            
        </li>
    
        <li class="chapter  " data-level="1.2.4.1.6" data-path="view/wxml/import.html">
            
                <a href="view/wxml/import.html">
            
                    
                    引用
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter  " data-level="1.2.4.2" data-path="view/wxss.html">
            
                <a href="view/wxss.html">
            
                    
                    WXSS
            
                </a>
            

            
        </li>
    
        <li class="chapter  " data-level="1.2.4.3" data-path="view/component.html">
            
                <a href="view/component.html">
            
                    
                    组件
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

            </ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
<!--                     

<div class="book-header" role="navigation">
    
</div>


 -->

                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <h1 id="mina">MINA</h1><p>MINA(MINA IS NOT APP) 是在微信中开发<strong>小程序</strong>的框架。</p><p>MINA的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。</p><p>MINA提供了自己的视图层描述语言WXML和WXSS，以及基于JavaScript的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。</p><h3 id="响应的数据绑定">响应的数据绑定</h3><p>MINA的核心是一个响应的数据绑定系统。</p><p>整个系统分为两块视图层(View)和逻辑层(App Service)</p><p>MINA可以让数据与视图保持同步非常简单。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。</p><p>通过这个简单的例子来看：</p><pre><code class="lang-html"><span class="hljs-comment">&lt;!-- Thie is our View --&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">view</span>&gt;</span> Hello {{name}}! <span class="hljs-tag">&lt;/<span class="hljs-name">view</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"changeName"</span>&gt;</span> Click me! <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
<pre><code class="lang-js"><span class="hljs-comment">// This is our App Service.</span>
<span class="hljs-comment">// This is our data.</span>
<span class="hljs-keyword">var</span> helloData = {
  name: <span class="hljs-string">'WeChat'</span>
}

<span class="hljs-comment">// Register a Page.</span>
Page({
  data: helloData,
  changeName: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{
    <span class="hljs-keyword">this</span>.setData({
      name: <span class="hljs-string">'MINA'</span>
    })
  }
})</code></pre>
<ul><li>开发者通过MINA将逻辑层数据中的<code>name</code>与视图层的<code>name</code>进行了绑定，所以在页面一打开的时候会显示<code>Hello WeChat!</code>
</li>
<li>当点击按钮的时候，视图层会发送<code>changeName</code>的事件给逻辑层，逻辑层找到对应的事件处理函数
</li>
<li>逻辑层执行了<code>setData</code>的操作，将name从<code>weChat</code>变为<code>MINA</code>，因为该数据和视图层已经绑定了，从而视图层会自动响应改变为<code>Hello MINA!</code> 。
</li></ul>
<h3 id="页面管理">页面管理</h3><p>MINA管理了整个<strong>小程序</strong>的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据，方法，生命周期函数注册进MINA中，其他的一切复杂的操作都交由MINA处理。</p><h3 id="基础组件">基础组件</h3><p>MINA提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的<strong>微信小程序</strong> 。</p><h3 id="丰富的api">丰富的API</h3><p>MINA提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。</p>
                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class="search-results-count"></span> 个结果 "<span class="search-query"></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">没有找到相关内容 "<span class="search-query"></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                    <div class="foot" id="footer">
                        <ul class="links ft">
                            <li class="links_item"><a href="">关于腾讯</a></li>
                            <li class="links_item"><a href="">服务协议</a></li>
                            <li class="links_item"><a href="">运营规范</a></li>
                            <li class="links_item"><a href="">辟谣中心</a></li>
                            <li class="links_item"><a href="">客服中心</a></li>
                            <li class="links_item"><a href="">联系邮箱</a></li>
                            <li class="links_item"><a href="">侵权投诉</a></li>
                            <li class="links_item">
                                <p class="copyright">Copyright © 2012-<span id="s_copyright_year">2016</span> Tencent. All Rights Reserved.</p>
                            </li>
                        </ul>
                    </div>
                
            </div>

            
                
                <a href="../demo.html" class="navigation navigation-prev " aria-label="Previous page: 体验小程序">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="structure.html" class="navigation navigation-next " aria-label="Next page: 目录结构" style="margin-right: 17px;">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>
</div>

        
    <script src="./gitbook.js"></script>
    <script src="./theme.js"></script>
    
        
        <script src="./search-engine.js"></script>
        
    
        
        <script src="./search.js"></script>
        
    
        
        <script src="./lunr.min.js"></script>
        
    
        
        <script src="./search-lunr.js"></script>
        
   

</div></body></html>